<template>
  <view class="container">
    <view class="navigation">
      <navigator url="/pages/recognize" class="nav-item">慧眼识图</navigator>
      <navigator url="/pages/bot" class="nav-item">链语AI</navigator>
      <navigator url="/pages/database" class="nav-item">藏药云库</navigator>
      <navigator url="/pages/databoard" class="nav-item">药海智屏</navigator>
    </view>

    <view class="main-content">
      <view class="knowledge-graph">
        <scroll-view scroll-x scroll-y style="height: 100%;">
          <!-- 知识图谱内容 -->
          <text>知识图谱内容</text>
        </scroll-view>
      </view>

      <view class="chat-container">
        <view class="chat-bubbles">
          <view v-for="(message, index) in messages" :key="index" :class="['chat-bubble', message.sender]">
            {{ message.text }}
          </view>
        </view>

        <view class="input-area">
          <view class="function-buttons">
            <button @click="uploadText">上传文字</button>
            <button @click="uploadImage">上传图片</button>
            <button @click="uploadVoice">上传语音</button>
            <button @click="uploadVideo">上传视频</button>
          </view>

          <view class="input-wrapper">
            <input v-model="userInput" placeholder="输入你的问题" @keyup.enter="sendMessage" />
            <button @click="sendMessage">发送</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const userInput = ref('');
    const messages = ref([
      { text: '你好！欢迎使用链语AI！', sender: 'bot' }
    ]);

    const sendMessage = () => {
      if (userInput.value.trim()) {
        messages.value.push({ text: userInput.value, sender: 'user' });
        // 模拟AI回复
        setTimeout(() => {
          messages.value.push({ text: '这是AI的回答', sender: 'bot' });
        }, 1000);
        userInput.value = ''; // 清空输入框
      }
    };

    const uploadText = () => {
      // 上传文字的逻辑
      console.log('上传文字');
    };

    const uploadImage = () => {
      // 上传图片的逻辑
      console.log('上传图片');
    };

    const uploadVoice = () => {
      // 上传语音的逻辑
      console.log('上传语音');
    };

    const uploadVideo = () => {
      // 上传视频的逻辑
      console.log('上传视频');
    };

    return {
      userInput,
      messages,
      sendMessage,
      uploadText,
      uploadImage,
      uploadVoice,
      uploadVideo
    };
  }
};
</script>

<style lang="scss" scoped>
@import '@/styles/global.scss';
@import '@/styles/bot.scss';

</style>